import React from 'react';
import {
View,
ScrollView,
TouchableOpacity,
StyleSheet,
Text,
Platform
} from 'react-native';

import BasePage from '../common/BasePage';
import Config from '../../config';
import HeartEapListView from "./HeartEapListView";
import SizeUtils from '../../common/SizeUtils';
import {DateUtils} from '../../utils/Utils';
import TImage from '../../components/TImage';
import Colors from '../../common/Colors';
import HeartEapRequestAction from '../../actions/heart/HeartEapRequestAction';
import NewsTypeShowView from '../news/NewsTypeShowView';
import HeartEndListRequestAction from '../../actions/heart/HeartEndListRequestAction';
import BaseItem from '../common/BaseItem';

export default class HeartEapListPageReview extends BasePage {
  constructor(props) {
    super(props);
    this.state.scrollEnabled = Platform.OS === 'ios';

    this._pageWidth = SizeUtils.getWindowSize().width;
  }

   render() {
    return (
      <View style={{backgroundColor: Colors.White, paddingTop: Config.paddingTop,
          flexDirection: 'column', flex:1}}>
        { this._renderChildPage()}
        { this._renderNavigationBar()}
        { this._renderStatusBar() }
      </View>
    )
  }
  _renderChildPage() {
    let height = SizeUtils.getWindowSize().height - Config.paddingTop;
    return(
      <ScrollView style={{width:this._pageWidth,
          height:height,
        }}
        ref={(ref) => this._scrollView = ref}
        horizontal={true}   // 水平方向
        showsHorizontalScrollIndicator={false}  // 水平指示器
        showsVerticalScrollIndicator={false}    // 垂直指示器
        pagingEnabled={true}    // 开启分页功能
        alwaysBounceHorizontal={false} //弹性拉动一截
        scrollEnabled={this.state.scrollEnabled}
      >
        <NewListView style={{width:SizeUtils.getWindowSize().width,height:height}}/>
      </ScrollView>
    )
  }
}


var styles = StyleSheet.create({
  topBtnTextStyle: {
    textAlign:"center",
  },
});

class NewListView extends HeartEapListView{
  constructor(props) {
    super(props);
    this._dataKey = "activity_id";
  }

  _requestData(page) {
    new HeartEapRequestAction().call(this, {page:page,tag:3,type:3,page_size:10});
  }
}
/*
class EndListView extends HeartEapListView{
    _requestData(page) {
    new HeartEapRequestAction().call(this, {page:page,tag:3,page_size:10});
  }
}
*/

class EndListView extends NewsTypeShowView{
  constructor(props) {
    super(props);
    this._dataKey = "activity_id";
  }

  _requestData(page) {
    new HeartEndListRequestAction().call(this, {page:page, board_id:5});
  }

  _onPressItem(data) {
    this.gotoPage(Config.pages.heart_end_list_content_page, data);
  }

  _onRenderItem(data, index) {
    return (<Item data={data} />);
  }
}

class Item extends BaseItem {
    render() {
        return (
            <View activeOpacity={0.3} underlayColor="#eeeeee"
              style={{backgroundColor:"#ffffff",
              width:SizeUtils.getWindowSize().width,
              paddingLeft:SizeUtils.translateDesignWidthToCode(40),
              paddingRight:SizeUtils.translateDesignWidthToCode(40),
              borderBottomWidth:this.props.data.title ? SizeUtils.translateDesignNumToCode(3) : 0,
              borderColor:"#eeeeee",paddingTop:SizeUtils.translateDesignHeightToCode(32),
              paddingBottom:SizeUtils.translateDesignHeightToCode(32),
                }}>
                <View style={{flexDirection:"column"}}>
                  <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32), color:"#000000", fontWeight:"bold"}}>
                    {this.props.data.title}
                  </Text>
                  {this._renderContent(this.props.data)}
                  {this._renderBottomText(this.props.data)}
                </View>
            </View>
        );
    }

    _renderContent(data) {
      if(!data.image_urls || data.image_urls.length == 0) {
        return this._renderText(data);
      }
      else if(data.image_urls.length < 3) {
        return this._renderOneImage(data);
      }
      else if(data.image_urls.length == 3) {
        return (
          <View style={{marginTop:SizeUtils.translateDesignHeightToCode(32), flexDirection:"row",
              width:SizeUtils.translateDesignWidthToCode(204 * 3 + 30 * 2), justifyContent:"space-around"}}>
            {this._renderThreeImage(data)}
          </View>
        );
      }
    }

    _renderText(data) {
      // return <Text></Text>
      // return(
      //   <View style={{height:SizeUtils.translateDesignHeightToCode(30)}}>
      //   </View>
      // )
    }

    _renderOneImage(data) {
      return (
        <View style={{marginTop:SizeUtils.translateDesignHeightToCode(32)}}>
          <TImage source={{uri:data.image_urls[0]}} style={{width:670, height:300}}
            resizeMode={"contain"}/>
          {this._renderPlayButton(data)}
        </View>
      )
    }

    _renderPlayButton(data) {
      if(data.video_url != "" && data.video_url != null && data.video_url != undefined) {
        return (
          <View style={{position:"absolute", top:0, width:SizeUtils.translateDesignWidthToCode(670),
            height:SizeUtils.translateDesignHeightToCode(300), justifyContent:"center", alignItems:"center"}}>
            <TImage source={require("../../../resource/images/news/play.png")} style={{width:72, height:72}}/>
          </View>
        )
      }
    }

    _renderThreeImage(data) {
      return data.image_urls.map((url, index) => {
        return <TImage key={index} source={{uri:url}} style={{width:204, height:140}}/>
      })
    }

    _renderBottomText(data) {
      var top = (!data.image_urls || data.image_urls.length == 0) ? 20 : 30;
      return (
        <View style={{flexDirection:"row", justifyContent:"space-between",
            marginTop:SizeUtils.translateDesignHeightToCode(top)}}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(26), color:"#999999",}}>{DateUtils.formatDate2(data.posted_at)}</Text>
        </View>
      )
    }
}
